<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>2022庄磊简历</title>
	<meta name="viewport" content="width=device-width" />
	<!-- favicon图标 -->
	<link rel="shortcut icon" href="../../static/favicon.png" type="image/x-icon">
	<!-- 51la网站统计 -->
	<script src="../../static/js/tongji.js"></script>
	<link rel="stylesheet" href="css/index.css" />
	<link rel="stylesheet" href="css/side.css" />
	<!-- 阿里字体图标 -->
	<link rel="stylesheet" href="//at.alicdn.com/t/c/font_2969103_117wkqbc6tln.css" crossorigin="anonymous">


</head>

<body>

	<!-- ------------ 简历 start ------------ -->
	<!-- ------------ 简历 end ------------ -->

	<div class="resume-box" id="app">
		<div class="node1"></div>
		<div class="node2"></div>
		<!-- ------------ 头部 start ------------ -->
		<div class="resume-head ">

			<div class="head-left"></div>
			<div class="head-center">
				<div class="head-label">
					个人简历
				</div>
			</div>
			<div class="head-right"></div>

		</div>
		<!-- ------------ 头部 end ------------ -->




		<!-- ------------ 内容 start ------------ -->
		<div class="resume-content">

			<!-- ------------ 基本信息 start ------------ -->

			<div class="basic-info " v-if="datas.xinxi">
				<!-- 照片 -->
				<div class="basic-photo">
					<img :src="datas.xinxi.img">
				</div>
				<!-- 右侧信息 -->
				<div class="basic-wrap">
					<div class="basic-top">
						<dl>
							<!-- 姓名 -->
							<dt>{{datas.xinxi.user}}</dt>
							<!-- 求职意向 -->
							<dd><span>{{datas.xinxi.name}}：</span>{{datas.xinxi.text}}</dd>
						</dl>
					</div>
					<div class="basic-bottom">
						<ul class="basic-list">
							<!-- 六要素 -->
							<li v-for="(item, index) in datas.xinxi.data" :key="index">
								<i :class="icon[index]"></i><span>{{item.name}}：</span>{{item.text}}
							</li>

						</ul>
					</div>
				</div>
			</div>




			<!-- ------------ 基本信息 end ------------ -->


			<!-- ------------ 教育背景 start ------------ -->
			<div class="module jiaoyu" v-if="datas.jiaoyu">
				<!-- 模块标题 -->
				<div class="module-title">
					<h3>{{datas.jiaoyu.title}}</h3>
				</div>
				<!-- 模块内容 -->
				<div class="module-content">

					<div class="list-wrap" v-for="(item, index) in datas.jiaoyu.data" :key="index" v-show="index<2">
						<ul class="item-col3">
							<li>{{ item.time }}</li>
							<li>{{ item.name }}</li>
							<li>{{ item.type }}</li>
						</ul>

						<div class="item-edit" v-if="item.data">
							<p>
								<strong>{{ item.data.name }}</strong>{{ item.data.text}}
							</p>
						</div>
					</div>

				</div>
			</div>
			<!-- ------------ 教育背景 end ------------ -->

			<!-- ------------ 工作经历 start ------------ -->
			<div class="module gongzuo" v-if="datas.gongzuo">
				<div class="module-title">
					<h3>{{datas.gongzuo.title}}</h3>
				</div>

				<div class="module-content">


					<div class="list-wrap" v-for="(item, index) in datas.gongzuo.data" :key="index" v-show="index<4">

						<ul class="item-col3">
							<li>{{item.time}}</li>
							<li>{{item.name}}</li>
							<li>{{item.type}}</li>
						</ul>
						<div class="item-edit">
							<ol v-for="(item, index) in item.data" :key="index">
								<li>{{item.text}}</li>
							</ol>

						</div>
					</div>



				</div>
			</div>
			<!-- ------------ 工作经验 end ------------ -->


			<!-- ------------ 项目经验 start ------------ -->
			<div class="module xiangmu" v-if="datas.xiangmu">
				<div class="module-title">
					<h3>{{datas.xiangmu.title}}</h3>
				</div>
				<div class="module-content">


					<div class="list-wrap" v-for="(item, index) in datas.xiangmu.data" :key="index">

						<!-- 左右两行 -->
						<ul class="item-col2">
							<li v-if="item.name">{{item.name}}</li>
							<li v-if="item.text">{{item.text}}</li>
						</ul>
						<div class="item-edit">
							<!-- 项目介绍 -->
							<p v-for="(item, index) in item.jieshao" :key="index">
								<strong>{{item.name}}：</strong><span>{{item.text}}</span>
							</p>
							<!-- 项目职责 -->
							<div>
								<strong>{{item.zhize.name}}：</strong>
								<ul>
									<li v-for="(item, index) in item.zhize.data" :key="index">
										{{item.text}}
									</li>
								</ul>
							</div>
						</div>





					</div>


				</div>
			</div>
			<!-- ------------ 项目经验 end ------------ -->


			<!-- ------------ 培训经历 start------------ -->
			<div class="module peixun" v-if="datas.peixun">

				<div class="module-title">
					<h3>{{datas.peixun.title}}</h3>
				</div>

				<div class="module-content">
					<div class="list-wrap" v-for="(item, index) in datas.peixun.data" :key="index">
						<ul class="item-col3" v-show="index<3">
							<li>{{item.time}}</li>
							<li>{{item.name}}</li>
							<li>{{item.type}}</li>
						</ul>
						<div class="item-edit" v-if="item.cont">
							<div>
								<strong>{{item.cont.name}}</strong>
								<span>{{item.cont.text}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- ------------ 培训经历 end------------ -->

			<!-- ------------ 专业技能 start ------------ -->
			<div class="module jineng" v-if="datas.jineng">
				<div class="module-title">
					<h3>{{datas.jineng.title}}</h3>
				</div>
				<div class="module-content">

					<div class="list-wrap">
						<div class="item-edit">
							<ul>
								<li v-for="(item, index) in datas.jineng.data" :key="index" v-show="index < 6 ">
									{{item.text}}
								</li>
							</ul>
						</div>
					</div>

				</div>
			</div>
			<!-- ------------ 专业技能 end ------------ -->




			<!-- ------------ 校园经历 start ------------ -->
			<div class="module xiaoyuan" v-if="datas.xiaoyuan0">
				<div class="module-title">
					<h3>{{datas.xiaoyuan.title}}</h3>
				</div>
				<div class="module-content">

					<div class="list-wrap">
						<div class="item-edit">
							<p v-for="(item, index) in datas.xiaoyuan.data" :key="index">
								<strong>{{item.name}}</strong><span>{{item.text}}</span>
							</p>
						</div>
					</div>

				</div>
			</div>
			<!-- ------------ 校园经历 end ------------ -->

			<!-- ------------ 荣誉证书 start ------------ -->
			<div class="module zhengshu" v-if="datas.zhengshu">
				<div class="module-title">
					<h3>{{datas.zhengshu.title}}</h3>
				</div>
				<div class="module-content">

					<div class="list-wrap">
						<div class="item-between">
							<ul>
								<li v-for="(item, index) in datas.zhengshu.data.ry" :key="index" v-show="index<4">
									<i>{{item.name}}</i>：<span>{{item.text}}</span>
								</li>
							</ul>
							<!-- <ul>
								<li v-for="(item, index) in datas.zhengshu.data.zs" :key="index" v-show="index<4">
									<i>{{item.name}}</i><span>{{item.text}}</span>
								</li>
							</ul> -->
						</div>


					</div>

				</div>
			</div>
			<!-- ------------ 荣誉证书 end ------------ -->

			<!-- ------------ 自我评价 start ------------ -->
			<div class="module pingjia" v-if="datas.pingjia" id="pingjia">
				<div class="module-title">
					<h3>{{datas.pingjia.title}}</h3>
				</div>
				<div class="module-content">

					<div class="list-wrap">
						<div class="item-edit">
							<ul>
								<li v-for="(item, index) in datas.pingjia.data" :key="index" v-show="index<4">
									{{item.text}}
								</li>
							</ul>
						</div>
					</div>

				</div>
			</div>
			<!-- ------------ 自我评价 end ------------ -->

			<!-- ------------ 公共模块 start ------------ -->
			<!-- 	<div class="module">
					<div class="module-title">
						<h3>公共模块</h3>
					</div>
					<div class="module-content">

						<div class="list-wrap">
							公共模块
						</div>

					</div>
				</div> -->
			<!-- ------------ 公共模块 end ------------ -->


		</div>
		<!-- ------------ 内容 end ------------ -->

		<!-- ------------ 底部 start ------------ -->
		<div class="footer">
			bealei
		</div>
		<!-- ------------ 底部 end ------------ -->
	</div>

	<!-- ------------ 侧边栏 start------------ -->
	<div class="side">
		<ul>
			<li class="peise">
				配色
				<ul id="peise">
					<li class="blue" onclick="blue()"></li>
					<li class="green"></li>
					<li class="red"></li>
					<li class="yellow"></li>
				</ul>
			</li>
			<li class="dayin">打印</li>
			<li class="down">下载
				<ul id="down">
					<li class="image1">PNG1</li>
					<li class="pdf1">PDF1</li>
					<li class="image2">PNG2</li>
					<li class="pdf2">PDF2</li>
				</ul>
			</li>
		</ul>
	</div>
	<!-- ------------ 侧边栏 end------------ -->



</body>


<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/vue-2.7.14.min.js"></script>
<!-- png、pdf -->
<script src="./js/jspdf.debug-1.3.4.js"></script>
<script src="./js/dom-to-image-2.6.0.js"></script>
<script src="./js/dom-to-image-2.6.0.js"></script>
<!-- 侧边栏 -->
<script src="./js/side.js"></script>


<script type="text/javascript">
	Vue.config.productionTip = true //阻止 vue 在启动时生成生产提示。
	new Vue({
		el: '#app',
		data() {
			return {
				datas: [],
				// 基本资料图标
				icon: [
					'iconfont icon-calendar1',
					'iconfont icon-weixin',
					'iconfont icon-jiaoyuye',
					'iconfont icon-shouji',
					'iconfont icon-gongzuodidian-',
					'iconfont icon-youjian3'
				]
			}
		},

		mounted() {
			// 这里一定要使用常量 const来引用this，不然可能会出现this指向问题
			const that = this
			// 使用getjson读取数据
			$.getJSON("./data.json", function (res) {
				// 将读取到的json数据赋值给rows
				that.datas = res.content;
				console.log("请求到的数据：", res)
			});
		},

	})
</script>

</html>